<template>
	<div class="page">
		<el-collapse accordion>
			<el-collapse-item>
				<template slot="title">
					高级搜索
				</template>
				<el-form :inline="true" :model="search" class="demo-form-inline">
					<el-form-item label="枚举项编码">
						<el-input v-model="search.user" size="small" placeholder="枚举项编码"></el-input>
					</el-form-item>
					<el-form-item label="枚举项值">
						<el-input v-model="search.user" size="small" placeholder="枚举项值"></el-input>
					</el-form-item>
					<div style="display: flex;justify-content: center;padding-bottom: 10px;padding-top: 10px;">
						<el-button class="el-main-color" icon="el-icon-delete" size="mini" @click="showDialog(1)">清除</el-button>
						<el-button class="el-main-color" icon="el-icon-search" size="mini" @click="showDialog(1)">查询</el-button>
					</div>
				</el-form>
			</el-collapse-item>
		</el-collapse>
		<div class="permission-main-page">
			<div class="permission-main">
				<div class="permission-header">
					<el-button class="el-main-color" size="mini" icon="el-icon-plus" @click="showDialog(1)">新增权限</el-button>
					<div class="block">
						<el-pagination @size-change="itemHandleSizeChange" @current-change="itemHandleCurrentChange" :current-page.sync="itemCurrentPage" :page-sizes="itemPageSizes" :page-size="itemPageSize" layout="sizes, prev, pager, next" :total="itemTotal">
						</el-pagination>
					</div>
				</div>
				<el-table :data="items" border style="width: 100%;" highlight-current-row @row-dblclick="dbClick" @row-click="rowClick" v-loading="items.length == 0" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">">
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="permissionName" label="权限名称" width="180">
					</el-table-column>
					<el-table-column prop="createDate" :formatter="format" label="创建时间" width="180">
					</el-table-column>
					<el-table-column prop="remarks" label="备注信息">
					</el-table-column>
				</el-table>
			</div>
			<div class="permission-slider">
				<div class="tree-header">
					<div class="title">权限资源配置（为权限分配资源）</div>
					<el-button class="el-main-color" size="mini" icon="el-icon-upload2" :loading="commitTreeStatus" @click="commitTree">确定</el-button>
				</div>
				<el-tree :data="data" show-checkbox ref="tree" node-key="id" :props="nodeProps" default-expand-all :expand-on-click-node="false">
					<span class="custom-tree-node esp" slot-scope="{ node, data }">
	        				<span style="height: 15px;line-height: 15px;">{{ node.label }}</span>
					</span>
				</el-tree>
			</div>
		</div>
		<el-dialog :title="permission.id?'编辑权限':'新增权限'" :visible.sync="dialogVisible">
			<el-form ref="menu" :model="permission" label-width="80px" style="text-align: left;">
				<el-form-item label="权限名称">
					<el-input v-model="permission.permissionName"></el-input>
				</el-form-item>
				<el-form-item label="备注信息">
					<el-input type="textarea" rows="4" placeholder="菜单备注信息" v-model="permission.remarks"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-delete" size="small" @click="deletePermission(permission)">删除</el-button>
				<el-button @click="dialogVisible = false" icon="el-icon-close" size="small">取 消</el-button>
				<el-button type="primary" @click="addPermission(permission)" icon="el-icon-edit" size="small" :loading="newSaveButtonStatus">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<style>
	@import url("../../common/common.css");
	@import url("permissionSetting.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				items: [],
				itemCurrentPage: 1,
				itemPageSize: 10,
				itemPageSizes: [5, 10, 15, 20],
				itemTotal: 0,
				dialogVisible: false,
				newSaveButtonStatus: false,
				search: {},
				permission: {

				},
				data: [],
				nodeProps: {
					label: 'label',
					children: 'childrenMenu'
				},
				currentPermissionId: null,
				commitTreeStatus: false
			}

		},
		created() {
			this.getList();
			this.getMenu();
		},
		methods: {
			getList() {
				var _self = this;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'permission/list?pageNo=' + _self.itemCurrentPage + '&pageSize=' + _self.itemPageSize,
					data: {},
					success: function(res) {
						_self.items = res.dataList;
						_self.itemTotal = res.total;

					}
				})
			},
			getMenu() {
				var _self = this;
				this.utils.get({
					url: 'menu/menu',
					success: function(res) {
						_self.data = res;
					}
				})
			},
			format(row, column, cellValue, index) {
				return new Date(row.createDate).Format('yyyy-MM-dd hh:mm:ss');
			},
			changeStatus(row, column, cellValue, index) {
				return row.status ? '启用' : '未启用'
			},
			showDialog(index) {
				if(index == 1) {
					this.permission = {}
					this.dialogVisible = true;
				}
			},
			itemHandleSizeChange(val) {
				console.log(`item每页 ${val} 条`);
				this.itemPageSize = val;
				this.getList();
			},
			itemHandleCurrentChange(val) {
				console.log(`item当前页: ${val}`);
				this.itemCurrentPage = val;
				this.getList();
			},
			dbClick(row) {
				this.permission = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
			},
			addPermission(item) {
				var _self = this;
				_self.newSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'permission/',
					data: item,
					success: function(res) { //若是parentCode == 0表示枚举项

						if(_self.permission.id) { //表示编辑
							_self.updateItem(_self.items, res);
						} else { //表示新增
							_self.items.push(res);
						}
						_self.newSaveButtonStatus = false;
						_self.dialogVisible = false;
						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				});
			},
			updateItem(items, item) {
				for(var index in items) {
					if(items[index].id == item.id) {
						this.$set(items, index, item);
					}
				}
			},
			deleteItem(items, item) {
				for(var index in items) {
					if(items[index].id == item.id) {
						items.splice(index, 1);
					}
				}
			},
			deletePermission(item) {
				var _self = this;
				_self.newSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: 'DELETE',
					url: 'permission/',
					data: item,
					success: function(res) { //若是parentCode == 0表示枚举项

						_self.deleteItem(_self.items, res);
						_self.dialogVisible = false;
						_self.newSaveButtonStatus = false;

						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				});
			},
			commitTree() {
				var _self = this;
				//this.$refs.tree.setCheckedKeys(['402880ed64efbd770164f081f532000e']);
				if(!this.currentPermissionId) {
					_self.$message({
						type: 'warning',
						message: '请先选择一个权限!'
					});

					return;
				}
				_self.commitTreeStatus = true;

				this.utils.ajaxJSON({
					type: 'POST',
					url: 'permission/savePermissionResource?permissionId=' + _self.currentPermissionId,
					data: _self.$refs.tree.getCheckedKeys(),
					success: function(res) { //若是parentCode == 0表示枚举项

						_self.commitTreeStatus = false;
						_self.$message({
							type: 'success',
							message: '保存权限资源成功!'
						});
					}
				});
			},
			rowClick(row) {
				this.currentPermissionId = row.id;
				this.getSelectKeys(row.id);
			},
			getSelectKeys(currentPermissionId) {
				var _self = this;
				this.utils.get({
					type: 'GET',
					url: 'permission/getPermissionResource?permissionId=' + _self.currentPermissionId,
					success: function(res) { //若是parentCode == 0表示枚举项
						_self.$refs.tree.setCheckedKeys(res);
						console.log(res)
						_self.$message({
							type: 'success',
							message: '装载权限资源成功!'
						});
					}
				});
			}

		},
	}
</script>